<template>
  <div class="hawkContent">
    <!-- 面包屑 -->
    <hawk-breadcrumb></hawk-breadcrumb>
    <!-- 搜索、添加区域 -->
    <el-row :gutter="20" style="padding-left: 20px; font-size:13px">
      <el-col :span="4" style="display:flex;align-items: center">
        <span style="width:50px">名称</span>
        <el-input placeholder="请输入主机" v-model="searchData.hostName"
                  :style="{width:'220px'}">
        </el-input>
      </el-col>
      <el-col :span="4" style="display:flex;align-items: center">
        <span style="width:100px">问题信息</span>
        <el-input placeholder="请输入问题信息" v-model="searchData.message">
        </el-input>
      </el-col>
      <!-- 时间日期选择器 -->
      <el-col :span="6" style="display:flex;align-items: center">
        <span style="width:70px">时间</span>
        <!-- @change="changeDate" -->
        <!-- <el-date-picker
          v-model="dateList"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yy-MM-dd HH:mm:ss"
          format="yy年MM月dd日 HH:mm:ss"
        > -->

        <el-date-picker v-model="searchData.beginTime" type="datetime"
                        placeholder="选择日期时间">
        </el-date-picker>
        <span>至</span>
        <el-date-picker v-model="searchData.endTime" type="datetime"
                        placeholder="选择日期时间">
        </el-date-picker>

      </el-col>
      <!-- 处理结果下拉菜单 -->
      <el-col :span="4" style="display:flex;align-items: center">
        <span style="width:100px">处理结果</span>
        <el-select clearable v-model="searchData.result" placeholder="请选择处理结果"
                   @change="changeOption">
          <el-option :value="0" label="处理完成"></el-option>
          <el-option :value="1" label="未处理"></el-option>
          <el-option :value="2" label="处理中"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="hawkSearch" @click="search">搜索</el-button>
        <el-button plain @click="reSet">重置</el-button>
      </el-col>
    </el-row>

    <!-- 引入表格组件 -->
    <hawk-table v-model="multipleSelection" :table-data="tableData" number
                :page="{current:searchData.current,
                size:searchData.size}" :options="[
        { key: 'hostName', label: '主机名称' },
        { key: 'message', label: '问题信息', width:'210' },
        { key: 'time', label: '产生时间' },
        { key: 'status', label: '发送状态' },
        { key: 'principal', label: '负责人' },
        { key: 'telphone', label: '电话' },
        { key: 'result', label: '处理结果' },
        { key: 'handle', label: '操作' }
      ]">
      <template #hostName="{ row }">
        <span>{{ row.hosts !=null ? row.hosts.name : '未知' }}</span>
      </template>
      <template #time="{ row }">
        <span>{{ transformDateFormat(row.time, 'yyyy-MM-dd hh:mm:ss') }}</span>
      </template>
      <template #status="{ row }">
        <span class="prompt" :class="{ spanRed: row.status == 0 }">{{
          row.status == 0 ? '已发送' : '未发送'
        }}</span>
      </template>
      <template #principal="{ row }">
        <span>{{ row.sysUser != null ? row.sysUser.nickName : '未知' }}</span>
      </template>
      <template #telphone="{ row }">
        <span>{{ row.sysUser != null ? row.sysUser.mobile : '未知' }}</span>
      </template>

      <template #result="{ row }">
        <span>{{
          row.result == 0 ? '处理完成' : row.result == 1 ? '未处理' : '处理中'
        }}</span>
      </template>

      <template #handle="{ row }">
        <span class="hawk-text-btn" @click="doDispose(row)"
              v-if="row.result != 0">{{ row.result == 1 ? '开始处理' : '处理完成' }}</span>
        <span class="hawk-text-divider" v-if="row.result != 0">|</span>
        <span class="hawk-text-btn" @click="del(row)">删除</span>
      </template>
    </hawk-table>

    <!-- 表格底部 -->
    <div class="bottom-btns">
      <div class="bottom-btns-left">
        <div class="bottom-btns-left-num">
          {{ multipleSelection.length }} 选择
        </div>
        <el-button type="hawkDelete" @click="batchDelete">批量删除</el-button>
        <!-- <el-button plain>导出</el-button> -->
      </div>
      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="searchData.current"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="searchData.size"
                     layout=" prev, pager, next,sizes" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
/**
 * @author 秦秋雅
 * @description 告警列表的视图层
 * @api /alarm/list
 * @since 2021年11月08日 13:50
 * @update 2021年11月10日 15:50
 * @modifier 秦秋雅
 * @bug 无
 * @version v1.0.0
 */
import { getList, doDelete, doEdit } from '@/api/alarm/list'
import { setTimeout } from 'timers'
import { log } from 'util'
export default {
  data () {
    return {
      value1: '',
      // // 多选数据
      // multipleSelection: [],
      dateList: ['', ''],
      multipleSelection: [],
      addDialogVisible: false,
      queryForm: {
        query: {
          hostName: '',
          alarmMessage: '',
          startTime: '',
          endTime: new Date(),
          state: '',
        },
        page: {
          current: 1,
          size: 10,
        },
      },
      searchData: {
        current: 1,
        size: 10,
        hostName: null,
        beginTime: null,
        endTime: null,
        result: null,
        message: '',
      },
      total: 0,
      tableData: [
        // {
        //   id: 1,
        //   hostName: '主机1',
        //   message: 'cpu使用率大于80%',
        //   time: '2021-11-02 14:00:15',
        //   status: 0,
        //   principal: '张三',
        //   telphone: '130xxxxxxx',
        //   result: 2,
        // },
      ],
    }
  },
  created(){
    // 接收可能传来的参数
    // console.log(this.$route);

    if (this.$route.params && this.$route.params.name) {
        this.searchData.hostName = this.$route.params.name
    }
  },
  async mounted () {
    await this.init()
  },
  // 方法集合
  methods: {
    //绑定搜索中的时间
    // changeDate () {
    //   this.queryForm.query.startTime = this.dateList[0]
    //   this.queryForm.query.endTime = this.dateList[1]
    //   console.log(this.queryForm.query)
    // },
    // 搜索
    async search () {
      //判断搜索信息是否为空
      let res = await getList(this.searchData)
      console.log(res)
      this.tableData = res.data.records
      console.log(this.tableData)
      this.total = res.data.total

      //this.searchData.size = 10
    },
    // 重置搜索信息
    reSet () {
      this.searchData = this.$options.data().searchData
      this.init()
    },
    // 获取列表
    async init () {
      await this.search()
    },
    // 每页数量修改
    handleSizeChange (val) {
      this.searchData.size = val
      this.init()
    },
    // 页码跳转
    handleCurrentChange (val) {
      this.searchData.current = val
      this.init()
    },
    // 多选
    // handleSelectionChange (val) {
    //   this.multipleSelection = val
    // },

    // result	0:处理完成,1:未处理,2:处理中
    // status	0:已发送,1:未发送

    //编辑开始处理、处理完成操作
    doDispose (row) {

      if (row.result == 1) {
        this.$confirm('确认开始处理?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(async () => {
            let d = Object.assign({},row)

            d.result = 2
            let ret = await doEdit(d)
            
            console.log(ret);

            if (ret.code == 20000) {
              // row.status = 0
              this.$message({
                type: 'success',
                message: '操作成功',
              })
            }
            setTimeout(() => {
              this.init()
            }, 200)

          })
          .catch(() => { })
      } else {
        this.$confirm('是否已处理完成?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(async () => {

            let d = Object.assign({},row)
            d.result = 0

            let ret = await doEdit(d)
            if (ret.code == 20000) {

              this.$message({
                type: 'success',
                message: '操作成功',
              })

              setTimeout(() => {
                this.init()
              }, 200)

            }
          })
          .catch(() => { })
      }

    },
    // 删除
    del (row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then( async () => {
         let ret  = await doDelete([row.id])
          if (ret.code == 20000) {

            let type = ''
            if (ret.data) {
              ret.message = '删除成功'
              type = 'success'
            } else {
              type = 'error'
            }
            this.$message({
              type: type,
              message: ret.message,
            })

            if (this.tableData.length == 1) {
              this.queryForm.page.current = this.queryForm.page.current - 1
              if (this.queryForm.page.current < 1) {
                this.queryForm.page.current = 1
              }
            }
            this.multipleSelection = []
            this.init()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 批量删除
    batchDelete () {
      if (this.multipleSelection.length < 1) {
        this.$message({
          type: 'warning',
          message: '请选择需要删除的数据',
        })
        return
      } else {
        let idList = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          idList.push(this.multipleSelection[i].id)
        }
        this.$confirm(`此操作将删除数据, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then( async  () => {
           let ret = await  doDelete(idList)
            console.log(ret, '--------------ret----');

          if (ret.code == 20000) {

            let type = ''
            
            if (ret.data || ret.message.indexOf('成功') != -1) {
              ret.message = '删除成功'
              type = 'success'
            } else {
              type = 'error'
            }

            this.$message({
              type: type,
              message: ret.message,
            })

            // console.log(this.multipleSelection.length);
            if (this.multipleSelection.length == this.tableData.length) {

              this.queryForm.page.current = this.queryForm.page.current - 1
              if (this.queryForm.page.current < 1) {
                this.queryForm.page.current = 1
              }

            }

            this.multipleSelection = []
            console.log('-------------init---');
            this.init()

          }

          })
          .catch(() => { })
      }
    },
    changeOption () {
      this.searchData.current = 1
    }
  },
}
</script>
<style lang="scss" scoped>
.prompt {
  color: rgb(106, 214, 106);
}

.spanRed {
  color: rgb(226, 50, 50);
}

.el-date-editor .el-range-separator {
  line-height: 25px;
}
</style>
